import { MdDarkMode } from "react-icons/md";
import useDarkMode from "./useDarkMode";
import { CiLight } from "react-icons/ci";
import { useRef } from "react";

export const DarkModeToggle = () => {
  const { isDark, setIsDark } = useDarkMode();
  const buttonRef = useRef<HTMLButtonElement>(null);
  const handlerToggle = () => {
    buttonRef.current?.blur();
    setIsDark(!isDark);
  }

  return (
    <button
      ref={buttonRef}
      className="w-4 h-5 absolute top-4 right-4 dark:text-slate-400"
      onClick={handlerToggle}
    >
      {isDark ? <MdDarkMode /> : <CiLight />}
    </button>
  );
};
